<template>
  <div class="top">
    <img src="../assets/img/arrow-right-black.png" alt="" />
    <span>新增收获地址</span>
  </div>
  <div class="middle">
    <van-cell-group inset>
      <!-- 输入任意文本 -->
      <van-field v-model="text" placeholder="请输入收货人姓名" />
      <van-field v-model="tel" type="tel" placeholder="请输入收货人手机号" />
      <div class="menpai">
        <van-field placeholder="请选择所在的区域" v-model="area" />
        <img src="../assets/img/arrow-right-black.png" alt="" />
      </div>
      <van-field
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        placeholder="请输入详细地址：如道路、门牌号、小区、楼栋号、单元、室等"
      />
    </van-cell-group>

    <div class="dizhi">
      <p>设为默认地址</p>
      <van-switch v-model="checked" size="24px" />
    </div>
  </div>

  <div class="bottom">
    <van-button disabled type="primary" size="large">确认</van-button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const tel = ref("");
    const text = ref("");
    const area = ref("");
    const message = ref("");
    const checked = ref(false);

    return { tel, text, area, message, checked };
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: center;
  padding: 12px;
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid #eee;
  img {
    transform: rotate(-180deg);
    width: 20px;
    height: 25px;
    position: absolute;
    left: 14px;
  }
  span {
    font-size: 22px;
    text-align: center;
  }
}
.middle {
  width: 100%;
  .van-cell-group {
    margin: 0;
    border-radius: 0;
  }
  .van-cell {
    margin: 10px 0;
  }
  .menpai {
    position: relative;
    img {
      width: 18px;
      height: 18px;
      position: absolute;
      right: 18px;
      top: 8px;
      cursor: pointer;
    }
  }
  .dizhi {
    height: 50px;
    background-color: #fff;
    margin-top: 10px;
    font-size: 14px;
    padding: 10px;
    position: relative;
    line-height: 32px;
    .van-switch {
      position: absolute;
      right: 20px;
      top:14px;
    }
  }
}
  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
